<script setup>
import { onMounted, ref, watch } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

import { nextTick } from 'vue';

const chartRef = ref(null);
const { renderEcharts } = useEcharts(chartRef);
let props = defineProps(['pointsRankingData'])


const option1 = ref({
  backgroundColor: 'transparent',
  grid: {
    top: 40,
    bottom: 0,
    left: '3%',
    right: '4%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  xAxis: {
    type: 'category',
    data: [
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
      '6月',
      '7月',
      '8月',
      '9月',
      '10月',
      '11月',
      '12月',
    ],
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
  },
  yAxis: {
    type: 'value',
    name: '积分',
    nameTextStyle: {
      color: '#fff',
      padding: [0, 0, 5, 0],
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      },
    },
  },
  series: [
    {
      type: 'bar',
      barWidth: '30%',
      animation: {
        duration: 2000,
        easing: 'cubicInOut',
      },
      data: [],
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(64, 158, 255, 1)',
            },
            {
              offset: 1,
              color: 'rgba(64, 158, 255, 0.1)',
            },
          ],
        },
        borderRadius: [5, 5, 0, 0],
        shadowColor: 'rgba(64, 158, 255, 0.5)',
        shadowBlur: 10,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowColor: 'rgba(64, 158, 255, 0.8)',
        },
      },
    },
  ],
});



// 监听数据变化
watch(
  () => props.pointsRankingData,
  (newVal) => {
    if (newVal) {
      option1.value.series[0].data = newVal;
      renderEcharts(option1.value);
    }
  },
  { immediate: true },
);
</script>

<template>
  <div class="bottom-right-chart map">
    <EchartsUI ref="chartRef" class="w-full" style="height:250px" />
  </div>
</template>

<style lang="scss" scoped>
@keyframes scanning {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.6;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    opacity: 0.6;
    transform: scale(0.8);
  }
}

.bottom-right-chart {
  width: 100%;


  :deep(.custom-select) {
    .ant-select-selector {
      background: linear-gradient(135deg,
          rgba(32, 187, 252, 0.1),
          rgba(32, 187, 252, 0.05)) !important;
      border: 1px solid rgba(32, 187, 252, 0.3) !important;
      box-shadow: 0 0 15px rgba(32, 187, 252, 0.2) !important;
      backdrop-filter: blur(8px);
    }

    .ant-select-selection-placeholder,
    .ant-select-selection-item {
      color: rgba(255, 255, 255, 0.9) !important;
      text-shadow: 0 0 8px rgba(32, 187, 252, 0.5);
    }

    .ant-select-arrow {
      color: rgba(32, 187, 252, 0.9) !important;
      text-shadow: 0 0 8px rgba(32, 187, 252, 0.5);
    }

    &:hover .ant-select-selector {
      border-color: rgba(32, 187, 252, 0.5) !important;
      box-shadow: 0 0 20px rgba(32, 187, 252, 0.3) !important;
      background: linear-gradient(135deg,
          rgba(32, 187, 252, 0.15),
          rgba(32, 187, 252, 0.1)) !important;
    }

    &.ant-select-focused .ant-select-selector {
      border-color: rgba(32, 187, 252, 0.7) !important;
      box-shadow: 0 0 25px rgba(32, 187, 252, 0.4) !important;
    }
  }

  .toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 6px 14px;
    border-radius: 24px;
    background: linear-gradient(135deg,
        rgba(0, 30, 60, 0.7),
        rgba(0, 20, 40, 0.9));
    border: 1px solid rgba(0, 200, 255, 0.4);
    box-shadow:
      0 0 15px rgba(0, 200, 255, 0.4),
      inset 0 0 8px rgba(0, 150, 255, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
    text-shadow: 0 0 8px rgba(0, 220, 255, 0.8);
    color: rgba(220, 240, 255, 0.9);
    font-weight: 500;
    letter-spacing: 1px;
    overflow: hidden;
    z-index: 1;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.1), transparent);
      transform: translateX(-100%);
      animation: scanning 3s infinite;
      z-index: -1;
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 10px;
      width: 6px;
      height: 6px;
      background-color: rgba(0, 220, 255, 0.8);
      border-radius: 50%;
      box-shadow: 0 0 10px 2px rgba(0, 220, 255, 0.6);
      transform: translateY(-50%);
      opacity: 0.8;
      transition: all 0.3s ease;
    }

    &:hover {
      background: linear-gradient(135deg,
          rgba(0, 40, 80, 0.8),
          rgba(0, 30, 60, 1));
      border-color: rgba(0, 220, 255, 0.6);
      box-shadow:
        0 0 25px rgba(0, 220, 255, 0.5),
        inset 0 0 12px rgba(0, 180, 255, 0.3);
      text-shadow: 0 0 12px rgba(0, 220, 255, 1);
      transform: translateY(-2px);
    }

    &:active {
      transform: scale(0.96) translateY(0);
      box-shadow:
        0 0 30px rgba(0, 220, 255, 0.6),
        inset 0 0 15px rgba(0, 180, 255, 0.4);
    }

    // 开关状态样式差异
    &:not(:hover)::after {
      animation: pulse 2s infinite;
    }

    // 开启状态特殊样式
    &.active {
      background: linear-gradient(135deg,
          rgba(0, 60, 100, 0.8),
          rgba(0, 40, 80, 1));
      border-color: rgba(0, 255, 220, 0.6);
      box-shadow:
        0 0 20px rgba(0, 255, 220, 0.5),
        inset 0 0 10px rgba(0, 255, 200, 0.3);

      &::after {
        left: auto;
        right: 10px;
        background-color: rgba(0, 255, 220, 0.8);
        box-shadow: 0 0 10px 2px rgba(0, 255, 220, 0.6);
      }
    }
  }
}
</style>
